<template>
	<view style="z-index: 9999;">
		<uni-popup ref="popupAlert" type="center"  :is-mask-click="mask">
			
			<view class="applyAdmin p32 df fdc bw jcsb br20" style="z-index: 9999">
				<!-- 头部图片 -->
				<view class="applyAdmin-imgDiv" v-if="type">
					<image :src="`https://api.youdaike.com/static/administratorList/${type}.png`" mode=""></image>
				</view>
				<!-- 标题+内容 -->
				<view class="applyAdmin-content ">
					<text class="tac db c3b3b3b f32 mtb20 fontw" v-if="title">{{title}}</text>
					<rich-text :nodes="subheading" class="tac db c626262 f30 mtb35"
						v-if="subheading"></rich-text>
					<rich-text :nodes="content" class="tac db ca1a1a1 f26 mb24" v-if="content"></rich-text>

					<textarea v-model.trim="ttText" style="background: #f1f1f1;" class="  br5 Iheight" cols="30" rows="10"
						v-if="inputBox" :placeholder="ttTextplaceholder"></textarea>
					<slot>

					</slot>
				</view>
				<!-- 确认or取消 -->
				<view class="applyAdmin-btnDiv df" v-if="btn">
					<button v-for="(item,index) in btn" :key="index" class="br10 f24 f1 mr20"
						:class="[ (index+1) < btn.length ? 'bw c2496FF br2s2496FF' : 'b2496FF cw' ]"
						@click="close(index)">
						{{item}}
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "yx-alert",
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			subheading: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},
			ttTextplaceholder: {
				type: String,
				default: ''
			},
			btn: {
				type: Array | Boolean,
				default () {
					return ["取消", "确定"];
				}
			},
			inputBox: { //textarea，用，不为空
				type: Boolean,
				default: false
			},
			mask: { //点击蒙版是否关闭弹窗
				type: Boolean,
				default: true
			}

		},
		data() {
			return {
				ttText: '' //弹窗输入框内容
			};
		},
		methods: {
			open() {
				this.$refs.popupAlert.open();
			},
			close(index) {
				this.$emit('close', index)
				if (index == 1) {
					//确认
					if (this.inputBox) {
						if (this.ttText != '') {
							this.$emit('confirm', this.ttText)
							this.$refs.popupAlert.close();
						} else {
							this.util.alert('请填写回复内容哦！')
							// this.alertMsg()

						}
					} else {
						this.$emit('confirm', this.ttText)

						this.$refs.popupAlert.close();
					}

				} else if (index == 0) {
					this.$emit('alertClose')
					this.$refs.popupAlert.close();
				}
				this.ttText = ''
			},

		}
	}
</script>

<style lang="less" scoped>
		@import "@/colorui/mains.css";
	.applyAdmin {
		width: 622rpx;
		// height: 474rpx;

		.applyAdmin-imgDiv {
			width: 128rpx;
			height: 128rpx;
			margin: 48rpx auto;
		}
	}

	.Iheight {
		width: 100%;
		height: 256rpx;
		margin-bottom: 64rpx;
		padding: 20rpx;
		box-sizing: border-box;

	}
</style>